8d:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"ExplicitChatIdProvider"] 8e:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"SWRDataProvider"] 8f:T2653,[V0_FILE]typescriptreact:file="components/menu-bar.tsx" isEdit="true" isMerged="true" "use client" import type * as React from "react" import { motion } from "framer-motion" import { Home, Settings, Bell, User } from "lucide-react" import { useTheme } from "next-themes" interface MenuItem { icon: React.ReactNode label: string href: string gradient: string iconColor: string } const menuItems: MenuItem[] = [ { icon: , label: "Home", href: "#", gradient: "radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(37,99,235,0.06) 50%, rgba(29,78,216,0) 100%)", iconColor: "text-blue-500", }, { icon: , label: "Notifications", href: "#", gradient: "radial-gradient(circle, rgba(249,115,22,0.15) 0%, rgba(234,88,12,0.06) 50%, rgba(194,65,12,0) 100%)", iconColor: "text-orange-500", }, { icon: , label: "Settings", href: "#", gradient: "radial-gradient(circle, rgba(34,197,94,0.15) 0%, rgba(22,163,74,0.06) 50%, rgba(21,128,61,0) 100%)", iconColor: "text-green-500", }, { icon: , label: "Profile", href: "#", gradient: "radial-gradient(circle, rgba(239,68,68,0.15) 0%, rgba(220,38,38,0.06) 50%, rgba(185,28,28,0) 100%)", iconColor: "text-red-500", }, ] const itemVariants = { initial: { rotateX: 0, opacity: 1 }, hover: { rotateX: -90, opacity: 0 }, } const backVariants = { initial: { rotateX: 90, opacity: 0 }, hover: { rotateX: 0, opacity: 1 }, } const glowVariants = { initial: { opacity: 0, scale: 0.8 }, hover: { opacity: 1, scale: 2, transition: { opacity: { duration: 0.5, ease: [0.4, 0, 0.2, 1] }, scale: { duration: 0.5, type: "spring", stiffness: 300, damping: 25 }, }, }, } const navGlowVariants = { initial: { opacity: 0 }, hover: { opacity: 1, transition: { duration: 0.5, ease: [0.4, 0, 0.2, 1], }, }, } const sharedTransition = { type: "spring", stiffness: 100, damping: 20, duration: 0.5, } export function MenuBar() { const { theme } = useTheme() const isDarkTheme = theme === "dark" return (

{item.icon} {item.label} {item.icon} {item.label}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { MenuBar } from "@/components/menu-bar" import { ThemeToggle } from "@/components/theme-toggle" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .backface-hidden { backface-visibility: hidden; } } /* Add smooth transition for theme changes */ * { transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1); } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import "@/styles/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import type React from "react" // Added import for React const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" isQuickEdit="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Switch } from "@/components/ui/switch" export function ThemeToggle() { const { theme, setTheme } = useTheme() const toggleTheme = () => { setTheme(theme === "light" ? "dark" : "light") } return (

) } 84:["$","$L8d",null,{"chatId":"KIpPi6t9BDv","children":["$","$L8e",null,{"data":{"@\"active-block\",\"KIpPi6t9BDv\",":{"id":"b_kIIi8R6DBC6","messageId":"ShdayWJRDPn5b6XvhlxYKJ9YylP5dnil","source":"$8f","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"animated-menu","type":"code-project","project":"animated-menu"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"KIpPi6t9BDv\",":false,"":null},"children":"$L90"}]}]

About

Tags

Share

About

Tags

Share

More from spoony

More Templates Like This